<div *ngFor="let pointer of pointerArray;let k=index">
    <div class="pointadd" *ngFor="let Coordinatepointer of pointer.AddCoordinate;let j=index;" [ngStyle]="{
        'left':Coordinatepointer.x,
        'top':Coordinatepointer.y, 
        'background':pointer.AddColor?pointer.AddColor:pointer.Color,
        'color':pointer.AddSmColor?pointer.AddSmColor:'#fff'}" (click)="addnote(pointer.PK_AnchorGuid,pointer.color,pointer.HaveTitle,pointer.HaveAuthor)">+</div>
    <div class="point" *ngFor="let Coordinatepointer of pointer.Coordinate;let j=index;" [ngStyle]="{
        'left':Coordinatepointer.x,
        'top':Coordinatepointer.y,
        'height':pointer?.NoteHeight+'%',
        'width':pointer?.NoteWidth+'%'
    }" (click)="openadd(pointer,Coordinatepointer.note.length)" (mouseenter)="pointer.IfDeviation?hover(k,j,Coordinatepointer.note.length):''" (mouseleave)="pointer.IfDeviation?hoverend(k,j,Coordinatepointer.note.length):''">
        <ng-container *ngFor="let note of Coordinatepointer.note;let i=index;">
            <ng-container *ngIf="i>(Coordinatepointer.note.length-5)">
                <div [class]="'note  p'+k" [class.shadow]="pointer.IfShadow" [ngStyle]="{
                    'color':pointer.FontColor,
                    'margin-left':pointer.IfDeviation?((i-(Coordinatepointer.note.length))*5)+'px':'0px',
                    'margin-top':pointer.IfDeviation?((i-(Coordinatepointer.note.length))*5)+'px':'0px'
                }" [style.background]="pointer.IfGradual? Color(pointer.ChangeColor):pointer.Color">
                    <ng-container *ngIf="i==Coordinatepointer.note.length-1">
                        <div class="note-title" *ngIf="pointer.HaveTitle">{{note?.Title}}</div>
                        <div class="notebox">
                            {{note?.Content}}
                        </div>
                        <div class="another" *ngIf="pointer.HaveAuthor">
                            _ {{note?.Name}}
                        </div>
                    </ng-container>
                    <ng-container *ngIf="Coordinatepointer.note.length>1">
                        <span class="num" *ngIf="(i+1)==Coordinatepointer.note.length">{{i+1}}</span>
                    </ng-container>
                    <ng-container *ngIf="(i+1)==Coordinatepointer.note.length">
                        <div #box [id]="'point'+k+'hover'+j" class="hoverbox" [ngStyle]="{
                            'top':Coordinatepointer.note.length>2 ? '50%':'0%',
                            'margin-top':Coordinatepointer.note.length>2 ?-(pointer?.NoteHeight*mainH/100)+'px':'0px',
                            'margin-left':-(pointer?.NoteWidth*mainW/50+4)/2+'px',
                            'width':pointer?.NoteWidth*mainW/50+4+'px'
                        }">
                            <ng-container *ngFor="let note of Coordinatepointer.note;let i=index;">
                                <ng-container *ngIf="i>(Coordinatepointer.note.length-5)">
                                    <div class="hovernote" [ngStyle]="{
                                        'height':pointer?.NoteHeight*mainH/100+'px',
                                        'width':pointer?.NoteWidth*mainW/100+'px',
                                        'color':pointer.FontColor
                                    }" [style.background]="pointer.IfGradual?Color(pointer.ChangeColor):pointer.Color">
                                        <div class="hovernote-title" *ngIf="pointer.HaveTitle">{{note?.Title}}</div>
                                        <div class="content">
                                            {{note?.Content}}
                                        </div>
                                        <div class="name" *ngIf="pointer.HaveAuthor">
                                            _ {{note?.Name}}
                                        </div>
                                    </div>
                                </ng-container>
                            </ng-container>
                            <div class="hovernote" *ngIf="Coordinatepointer.note.length==3" [ngStyle]="{
                                'height':pointer?.NoteHeight*mainH/100+'px',
                                'width':pointer?.NoteWidth*mainW/100+'px'
                            }">
                            </div>
                        </div>
                    </ng-container>
                </div>
            </ng-container>
        </ng-container>
    </div>
</div>
<canvas-add-root *ngIf="canopenadd" (onCloseAdd)="closeAdd($event)" (onAdd)="add($event)" [pointdata]="pointdata" (deldata)="del($event)"></canvas-add-root>

<mask-root *ngIf="addwindow" [opacity]="'0'" (onClick)="addwindow=false;"></mask-root>
<addbox-root *ngIf="addwindow" [config]="config" (onok)="onok($event)" (oncancel)="oncancel($event)"></addbox-root>